<!--  -->
<template>
    <div style="overflow: hidden;">
        <h1 style="float: left;">{{ tagName }}社区内容</h1>
        
    </div>
    <el-divider />
    <div class="infinite-list-wrapper">
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
      >
        <li v-for="item in articles" :key="i" class="list-item" @click="handleClick(item)">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: flex-start;
            "
          >
            <div
              style="
                width: 100px;
                height: 100px;
                border-radius: 10%;
                overflow: hidden;
                margin: 20px 10px 20px 30px;
              "
            >
              <img
                style="width: 100%; height: 100%; object-fit: cover"
                :src="item.cover"
                alt=""
              />
            </div>
            <div
              style="
                font-size: 14px;
                font-size: x-large;
                font-weight: bold;
                width: 85%;
              "
            >
              <el-descriptions :title="item.title" style="margin-left: 10px;width: 600px;">
                <el-descriptions-item label="">
                  <el-text line-clamp="2">
                    {{item.description}}
                  </el-text>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="" style="margin-left: 10px">
                <el-descriptions-item label="">
                  <el-row class="mb-4">
                    <el-col :span="14">
                        <el-button type="primary" size="small" round
                        v-for="(it, index) in item.tags.split(',')" :key="index"
                        @click.stop="toCommunity(it)"
                        >
                        {{it}}</el-button>
                    </el-col>
                    <el-col :span="10">
                      <el-rate
                        v-model="item.score"
                        disabled
                        show-score
                        text-color="#ff9900"
                        score-template="{value} points"
                      />
                    </el-col>
                    {{item.raters}}人已评分
                  </el-row>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </li>
      </ul>
      <p v-if="loading">Loading...</p>
      <p v-if="noMore">No more</p>
    </div>
</template>

<script>
import axios from "axios";
import { computed } from "vue";

export default {
  name: 'CommunityArticle',
  components: {},
  props: {
    tagName:{
      type:String,
      default:''
    }
  },
  data() {
    return {
        dataNum:0,
        articles:[],
        start: 0,   //当前数据总长，即下次获取的内容初始值-1
        end:0,
        step:5,
        loading: false,
        noMore: computed(() => {
            return this.start >= this.dataNum;
        }),
        disabled: computed(() => {
            return this.loading || this.noMore;
        })
    }
  },
  computed: {},
  watch: {
    tagName:{
      handler(newVal,oldVal){
        if(newVal!=oldVal){
            this.init()
        }
      },
      immediate:true
    }
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        //对外反射核心参数以获得数据加载,分别是初始值和结束值
        this.getArticle(this.start,this.start+this.step)

        this.start += this.step;
        this.loading = false;
        
      }, 500);
    },
    toCommunity(tag){
    //   alert(tag)
      this.$emit('toCommunity',tag)
    },
    handleClick(item){ //点击文章跳转详细页面
      this.$router.push({path:'/article',query:{id:item.a_id}})
    },
    getArticle(start,end){    //更新文章总数
      this.start = start
      this.end = end
      this.GetData()
      console.log(this.articles);
    },
    GetData(){    //获取点击标签后的文章
      axios.get("http://localhost:8888/article/communityArticle",{
        params:{
          start:this.start,
          end:this.end,
          tag:this.tagName
        }
      }).then(data=>{
        console.log(data.data.data);
        if(data.data.data){
          this.articles.push(...data.data.data)
          console.log(this.articles);
        }else{
          this.articles = this.articles
        }
      })
    },
    GetDataNum(){   //获取"相关推荐"下当前查看推荐的文章总数
      axios.get("http://localhost:8888/article/articleNumByTag",{
        params:{
            tag:this.tagName
        }
      }).then(data=>{
        this.dataNum =data.data.data;
        // console.log(this.dataNum);
      })
    },
    init(){
        this.start = 0;
        this.end = 0
        this.articles = [];
        this.GetDataNum()
        this.GetData()
    }
  },
  created() {
    // this.$store.state.lastActiveComponent = "communityarticle"
    this.init()
  },
  mounted() {}
}
</script>

<style scoped>
.infinite-list-wrapper {
  /* height: 600px; */
  text-align: center;
}

/* li */
.list-item {
  /* display: flex; */
  margin-bottom: 20px;
  cursor: pointer;
}

.list-item img {
  width: 70px;
  height: 70px;
  border-radius: 10%;
  object-fit: cover;
}

.list-item .content {
  flex: 1;
  margin-left: 10px;
}

.list-item .content .title {
  font-size: 14px;
  font-size: x-large;
  font-weight: bold;
}

.list-item .content .description {
  font-size: 12px;
  color: #999aaa;
}

.infinite-list-wrapper {
  height: 100px;
  
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.list li:last-child {
  border-bottom: none;
}

.list li:hover {
  box-shadow: 1px 1px 20px #555555;
}
</style>
